<template>
  <ul class='list'>
    <li v-for="item in getListData" class="pr" @click="showMoreInfo(item)">
      <img class="pa" :src="item.state==-1?imgs.bac2:imgs.bac1" alt="">
      <span class="money"><span>￥</span><span>{{item.money}}</span></span>
      <span :class="{'title':true,'white-space':true,'pa':true,'color-gold':item.state!=-1}">{{item.title}}</span>
      <span class="pa time">使用期限：{{item.time}}</span>
      <span class="pa time limit">消费满{{item.over}}元可使用</span>
      <img class="pa used" v-if="item.state!==0" :src="item.state==1?imgs.used:imgs.over" alt="">
    </li>
  </ul>
</template>
<script>
export default {
  props:["data","toSendUrl"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        bac1:require('../../../../assets/img/vip/voucher/bac1.png'),
        bac2:require('../../../../assets/img/vip/voucher/bac2.png'),//过期背景
        used:require('../../../../assets/img/vip/voucher/use1.png'),
        over:require('../../../../assets/img/vip/voucher/use2.png'),//过期
      }
    };
  },
  computed: {
    getListData() {
      return this.data || [];
    }
  },
  methods: {
    showMoreInfo(item){
      sessionStorage.setItem("detailId",item.id)
      this.$router.push(this.toSendUrl || "/member/voucher/detail/"+item.id)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 15px;

  li{
    height: 100px;
    margin-bottom: 10px;
    

    img:nth-child(1){
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .used{
      width: 43px;
      height: 43px;
      top: 10px;
      right: 15px;
    }
    .money{
      display: inline-block;
      width: 35%;
      text-align: center;
      color: #fff;
      line-height: 100px;
      font-size: 21px;

      span:nth-child(2){
        font-size: 35px;
      }
    }
    .title{
      font-size: 24px;
      margin-top: 15px;
      left: 50%;
      color: #999;
      width: calc(50% - 20px);
    }
    .time{
      margin-top: 47px;
      font-size: 12px;
      color: #999;
      left: 50%;
      text-indent: 6px;
    }
    .time::before{
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #C1C1C1;
    }
    .limit{
      margin-top: 65px;
    }
  }
  li:active{
    opacity: .6;
  }
}
</style>